<extend name="Base/common"/>

<block name="header"></block>

<block name="body">
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">{$detail.lid|getLocationName} 详细信息</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            
            <div class="row">
                <!--温湿度 仪表盘 -->
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                                {$detail.create_time|date="y年m月d日",###}
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <!-- 温度 -->
                            <div class="col-lg-6" id="temperature" style="height: 400px;"></div>
                            <script type="text/javascript">
                                var dom1 = document.getElementById("temperature");
                                var myChart1 = echarts.init(dom1);
                                var app1 = {};
                                var temperature = {$temperature};//初始化湿度{$detail.temperature}报错
                                option1 = null;
                                option1 = {
                                    tooltip : {
                                        formatter: "{a} <br/>{b} : {c}%"
                                    },
                                    toolbox: {
                                        feature: {
                                            //restore: {},
                                            saveAsImage: {}
                                        }
                                    },
                                    series: [
                                        {
                                            name: '当前温度',
                                            type: 'gauge',
                                            detail: {formatter:'{value}℃'},
                                            axisLine: {            // 坐标轴线  
                                                    lineStyle: {       // 属性lineStyle控制线条样式  
                                                        color: [[0.18, '#91c7ae'], [0.28, '#63869e'], [1, '#c23531']]
                                                                }  
                                                    },  
                                            //初始值
                                            data: [{value: temperature, name: '温度'}],
                                             
                                        }
                                    ]
                                };
                                
                                setInterval(function () {
                                    //变量值
                                    //option.series[0].data[0].value = 33;
                                    myChart1.setOption(option1, true);
                                },2000);
                                ;
                                if (option1 && typeof option1 === "object") {
                                    myChart1.setOption(option1, true);
                                }
                            </script>
                            <!-- 湿度 -->
                            <div class="col-lg-6" id="humidity" style="height: 400px;"></div>
                            <script type="text/javascript">
                                var dom2 = document.getElementById("humidity");
                                var myChart2 = echarts.init(dom2);
                                var app2 = {};
                                var humidity = {$humidity};//初始化湿度{$detail.humidity}报错
                                option2 = null;
                                option2 = {
                                    tooltip : {
                                        formatter: "{a} <br/>{b} : {c}%"
                                    },
                                    toolbox: {
                                        feature: {
                                            //restore: {},
                                            saveAsImage: {}
                                        }
                                    },
                                    series: [
                                        {
                                            name: '当前湿度',
                                            type: 'gauge',
                                            detail: {formatter:'{value}%'},
                                            axisLine: {            // 坐标轴线  
                                                    lineStyle: {       // 属性lineStyle控制线条样式  
                                                        color: [[0.35, '#FF6347'], [0.75, '#63869e'], [1, '#c23531']]
                                                                }  
                                                    },
                                            //初始值
                                            data: [{value: humidity, name: '湿度'}]
                                        }
                                    ]
                                };
                                
                                setInterval(function () {
                                    //变量值
                                   // option.series[0].data[0].value = 22;
                                    myChart2.setOption(option2, true);
                                },2000);
                                ;
                                if (option2 && typeof option2 === "object") {
                                    myChart2.setOption(option2, true);
                                }
                            </script>

                                    <!-- 其他巡检项 -->
                            <div class="col-lg-12">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>供电</th>
                                                <th>空调</th>
                                                <th>网络设备</th>
                                                <th>UPS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="warning">
                                                <td>{$detail.powered|getInspectionState=###,powered}</td>
                                                <td>{$detail.Air_conditioning|getInspectionState=###,Air_conditioning}</td>
                                                <td>{$detail.equipment|getInspectionState=###,equipment}</td>
                                                <td>{$detail.ups|getInspectionState=###,ups}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="panel panel-info">
                                    <div class="panel-heading">
                                        备注
                                    </div>
                                    <div class="panel-body">
                                        <p>{$detail.text}</p>
                                    <!-- </div>
                                    <div class="panel-footer">
                                        Panel Footer
                                    </div> -->
                                </div>
                            </div>

                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            
            </div>
                <!-- /.row -->

            <div class="row">
                <!-- 温湿度曲线 -->
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            温度曲线
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <div class="col-lg-12" id="graph" style="height:400px;"></div>
                                <script type="text/javascript">
                                    var dom3 = document.getElementById("graph");
                                    var myChart3 = echarts.init(dom3);
                                    var app3 = {};
                                    option3 = null;
                                    
                                   // data = [["2000-06-05",16],["2000-06-06",29],["2000-06-07",35],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",30],["2000-06-15",45],["2000-06-16",39],["2000-06-17",15],["2000-06-18",-11],["2000-06-19",39],["2000-06-20",26],["2000-06-21",37],["2000-06-22",28],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",16],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",25],["2000-07-03",17],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",16],["2000-07-08",17],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",13],["2000-07-13",17],["2000-07-14",31],["2000-07-15",11],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",11],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
                                   
                                    $.get('{:U('Inspection/Index/roomGraphDataJSON',array('lid'=>$detail['lid']))}').done(function (data) {
                                    myChart3.setOption({
                                            title: {
                                                text: '温度曲线图'
                                            },
                                            tooltip: {
                                                trigger: 'axis'
                                            },
                                            xAxis: {
                                                data: data.map(function (item) {
                                                    return item[0];
                                                })
                                            },
                                            yAxis: {
                                                splitLine: {
                                                    show: false
                                                }
                                            },
                                            toolbox: {
                                                left: 'center',
                                                feature: {
                                                    dataZoom: {
                                                        yAxisIndex: 'none'
                                                    },
                                                    restore: {},
                                                    saveAsImage: {}
                                                }
                                            },
                                            dataZoom: [{
                                                startValue: '2000-07-01'
                                            }, {
                                                type: 'inside'
                                            }],
                                            visualMap: {
                                                top: 10,
                                                right: 10,
                                                pieces: [{
                                                    gt: -20,
                                                    lte: 18,
                                                    color: '#91c7ae'
                                                }, {
                                                    gt: 19,
                                                    lte: 28,
                                                    color: '#63869e'
                                                }, {
                                                    gt: 29,
                                                    lte: 100,
                                                    color: '#c23531'
                                                }],
                                                outOfRange: {
                                                    color: '#999'
                                                }
                                            },
                                            series: {
                                                name: '机房温度',
                                                type: 'line',
                                                data: data.map(function (item) {
                                                    return item[1];
                                                }),
                                                markLine: {
                                                    silent: true,
                                                    data: [{
                                                        yAxis: 18
                                                    }, {
                                                        yAxis: 28
                                                    }, {
                                                        yAxis: 100
                                                    }]
                                                }
                                            }
                                        });
                                });
                                    // if (option3 && typeof option3 === "object") {
                                    //     myChart3.setOption(option3, true);
                                    // }
                                </script>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- 温湿度曲线结束 -->
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            巡检报告列表
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                    <tr>
                                        <th>巡检日期</th>
                                        <th>温度（℃）</th>
                                        <th>湿度（%）</th>
                                        <th>供电</th>
                                        <th>空调</th>
                                        <th>网络设备</th>
                                        <th>UPS</th>
                                        <th>备注</th>
                                        <th>详细信息</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <volist name="list" id="vo" >
                                        <tr class="odd gradeX">
                                            <td>{$vo.create_time|date="y-m-d",###}</td>
                                            <td>{$vo.temperature}</td>
                                            <td>{$vo.humidity}</td>
                                            <td>{$vo.powered|getInspectionState=###,powered|substr=###,0,6}</td>
                                            <td>{$vo.Air_conditioning|getInspectionState=###,Air_conditioning|substr=###,0,6}</td>
                                            <td>{$vo.equipment|getInspectionState=###,equipment|substr=###,0,6}</td>
                                            <td>{$vo.ups|getInspectionState=###,ups|substr=###,0,6}</td>
                                            <td class=" ddd sorting_desc">{$vo.text|substr=###,0,18}</td>
                                            <td><a href="{:U('Inspection/Index/room',array('lid'=>$vo['lid'],'createtime'=>$vo['create_time']))}">详细信息</a></td>
                                        </tr>
                                    </volist>
                                    <script>
                                        $(document).ready(function() {
                                            $('#dataTables-example').DataTable({
                                                responsive: true,
                                                "bSort": false
                                            });
                                        });
                                    </script>
                                    
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->




        </div>
        <!-- /#page-wrapper -->
</block>
